<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page isELIgnored="false"%>
<jsp:include page="../frame/header.jsp"></jsp:include>

<title>编辑信息</title>
<style>
#imgDiv div {
	margin-left: 8px;
	margin-top: 8px;
	position: relative;
}

.del-img {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 9999;
	cursor: pointer;
	display: none;
}

.gray {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	filter: url(desaturate.svg#grayscale);
	filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1 );
	-webkit-filter: grayscale(1);
}
</style>
</head>

<body>
	<div class="container-fluid">
		<div class="row-fluid">
			<div>
				<ul class="breadcrumb">
					<li><a href="#">娱乐交友</a> <span class="divider">/</span></li>
					<li><a href="#">主题帖子管理</a> <span class="divider">/</span></li>
					<li><a href="#">“约”管理</a></li>
				</ul>
			</div>

			<div class="box">
				<div class="box-header well" data-original-title>
					<h2>
						<i class="icon-edit"></i> 编辑“约”
					</h2>
					<div class="box-icon">
						<a href="#" class="btn btn-setting btn-round"><i
							class="icon-cog"></i></a> <a href="#"
							class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
						<a href="#" class="btn btn-close btn-round"><i
							class="icon-remove"></i></a>
					</div>
				</div>
				<div class="box-content">
					<form id="myform" class="form-horizontal" method="post"
						action="<c:url value="/admin/forum/appoint" />">
						<fieldset>
							<input type="hidden" name="topicId" value="${topic.topicId }">
							<div class="control-group">
								<label class="control-label" for="subject">约标题</label>
								<div class="controls">
									<input class="input-xlarge focused" name="subject" id="subject"
										type="text" value="${topic.subject }" check-type="required" required-message="请输入约标题">
								</div>
							</div>

							<div class="control-group">
								<label class="control-label" for="appointType">约类型</label>
								<div class="controls">
									<select id="appointType" name="appointType" class="input-xlarge">
										<c:forEach var="sort" items="${sorts }">
											<option value="${sort.menuId }"
												<c:if test='${sort.menuId == topic.appointType }'>selected</c:if>>${sort.menuName
												}</option>
										</c:forEach>
									</select>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="members">约人数</label>
								<div class="controls">
									<input class="input-xlarge" name="members" id="members"
										type="text" value="${topic.members }" check-type="number">人
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="appointTime">约时间</label>
								<div class="controls">
									<input class="input-xlarge" name="appointTime" id="appointTime"
										type="text" value="${topic.appointTime }">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="appointDemand">约要求</label>
								<div class="controls">
									<textarea class="input-xlarge" name="appointDemand" id="appointDemand"
										>${topic.appointDemand }</textarea>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="viewPerm">浏览权限</label>
								<div class="controls">
									<label class="radio inline"> 
										<input type="radio" name="viewPerm" value="0" <c:if test="${topic.viewPerm == 0 }">checked</c:if>>所有人
									</label> 
									<label class="radio inline"> 
										<input type="radio" name="viewPerm" value="1" <c:if test="${topic.viewPerm == 1 }">checked</c:if>>仅成员
									</label>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="joinType">加入方式</label>
								<div class="controls">
									<label class="radio inline"> 
										<input type="radio" name="joinType" value="0" <c:if test="${topic.joinType == 0 }">checked</c:if>>自由加入
									</label> 
									<label class="radio inline"> 
										<input type="radio" name="joinType" value="1" <c:if test="${topic.joinType == 1 }">checked</c:if>>邀请加入
									</label>
									<label class="radio inline"> 
										<input type="radio" name="joinType" value="2" <c:if test="${topic.joinType == 2 }">checked</c:if>>审核加入
									</label>
								</div>
							</div>
							<div class="control-group" id="inviteUsers" style="display:none">
								<label class="control-label" for="inviteUsers">邀请好友</label>
								<div class="controls">
									<textarea class="input-xlarge" name="inviteUsers" id="inviteUsers"
										>${topic.inviteUsers }</textarea>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="linkMan">联系人</label>
								<div class="controls">
									<input class="input-xlarge" name="linkMan" id="linkMan"
										type="text" value="${topic.linkMan }">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="linkPhone">联系方式</label>
								<div class="controls">
									<input class="input-xlarge" name="linkPhone" id="linkPhone"
										type="text" value="${topic.linkPhone }">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="message">约内容</label>
								<div class="controls">
									<textarea id="description_mc" name="message" rows="18"
										check-type="required" required-message="请输入帖子内容"
										style="height: 200px; width: 60%">${topic.message }</textarea>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="fileInput">约图片</label>
								<div class="controls">
									<input class="input-file uniform_on" name="file"
										id="userHeader" type="file"> <input type="button"
										class="btn btn-success" value="upload"
										onclick="return ajaxFileUpload();"> <img id="loading"
										class="hide"
										src="<c:url value="/resources/img/ajax-loader-6.gif"/>">
								</div>
							</div>
							<div class="control-group">
								<input type="hidden" name="images" id="images"
									value="${topic.images }"> <label class="control-label"
									for="fileInput">&nbsp;</label>
								<div class="controls" id="imgDiv"></div>
							</div>
							
							
							<div class="control-group">
								<label class="control-label" for="closed">关闭约</label>
								<div class="controls">
									<label class="radio inline"> 
										<input type="radio" name="closed" value="0" <c:if test="${topic.closed == 0 }">checked</c:if>>开启
									</label> 
									<label class="radio inline"> 
										<input type="radio" name="closed" value="1" <c:if test="${topic.closed == 1 }">checked</c:if>>关闭
									</label>
								</div>
							</div>
							
							<div class="control-group">
												<label class="control-label" for="commentBaseCount">评论基数</label>
												<div class="controls">
													<input class="input-xlarge" id="commentBaseCount"
														name="commentBaseCount" type="text"
														value="${topic.commentBaseCount }" check-type="number">
												</div>
											</div>
				
											<input name="commentCount" type="hidden"
												value="${topic.commentCount }"> <input name="praiseCount"
												type="hidden" value="${topic.praiseCount }">
				
											<div class="control-group">
												<label class="control-label" for="praiseBaseCount">点赞基数</label>
												<div class="controls">
													<input class="input-xlarge" id="praiseBaseCount"
														name="praiseBaseCount" type="text"
														value="${topic.praiseBaseCount }" check-type="number">
												</div>
											</div>

							<div class="form-actions">
								<button id="saveBtn" type="button" class="btn btn-primary">保存</button>
								<button id="cancelBtn" type="button" class="btn">返回</button>
							</div>
						</fieldset>
					</form>

				</div>
			</div>
			<!--/span-->

		</div>
	</div>
	<!--/row-->
</body>

<jsp:include page="../frame/scripts.jsp"></jsp:include>
<script type="text/javascript">

var images = new Array();

$(document).ready(function(){
	$('#cancelBtn').click(function(){
		window.location.href = '<c:url value="/admin/forum/appoint" />';	
	})
	
	var imgs = "${topic.images}";
	if(imgs && "" != imgs){
		$.each(imgs.split(","),function(i,item){
			setImages(item);
		})
	}
	
	$("#myform").validation();
	
	//保存
	$('#saveBtn').click(function(){
		var value = images.join(",");
		$("input[name='images']").val(value);
		
		$("#myform").submit();
	})
	
	//xheditor 文件上传
	$('#description_mc').xheditor({
		tools:'full',
		skin:'default',
		upMultiple:1,
		html5Upload:false,
		upImgUrl:'<c:url value="/xheditor/fileupload"/>',
		upImgExt:'jpg,png,jpeg,gif,bmp',
		onUpload:function(data){
			
		}
	})
	
	$('input[name=joinType]').change(function(){
		if($(this).val() == 1){
			$('#inviteUsers').show();
		}else{
			$('#inviteUsers').hide();
		}
	})
})

function setImages(item){
	var image = DOMAIN + '/resources/fileupload/'+item;
	var delImg = '<c:url value="/resources/img/del.png"/>';
	var img = '<div style="float:left;height:100px;" onmouseout="hideClose()" onmouseover="showClose(this)"><img class="del-img" onclick="delImg(this,\''+item+'\')" src="'+delImg+'"><img class="pic" src="'+image+'" height="100"></div>';
	$("#imgDiv").append(img).show();
	images.push(item);	
}


//上传图片
function ajaxFileUpload(){
	
	$("#loading").ajaxStart(function(){
		//开始上传文件时显示一个图片
		$(this).show();
	}).ajaxComplete(function(){
		//文件上传完成将图片隐藏起来
		$(this).hide();
	});
	
	$.ajaxFileUpload({
		url:'<c:url value="/fileupload"/>',//用于文件上传的服务器端请求地址
		secureuri:false,//一般设置为false
		fileElementId:'userHeader',//文件上传空间的id属性  <input type="file" id="file" name="file" />
		dataType: 'JSON',//返回值类型 一般设置为json(大写)
		success: function (data, status){
			setImages($(data).html());
		},
		error: function (data, status, e){
			alert(e);
		}	
	})
	
	return false;
}

function showClose(obj){
	$(".del-img").hide();
	$(".pic").removeClass("gray");
	$(obj).find(".pic").addClass("gray");
	$(obj).find(".del-img").show();
}

function delImg(obj,value){
	$(obj).parent().remove();
	var index = $.inArray(value,images);
	images.splice(index,1);
}

function hideClose(){
	$(".del-img").hide();
	$(".pic").removeClass("gray");
}


function insertUpload(msg){
	console.log(msg);
}

</script>